<html>

<head>
    <!-- 中文支持 -->
    <meta charset="utf-8">
</head>

<body>
    <h2>sciter中使用vue3Vuex</h2>


    <div id="app">
        {{count}}
        <button v-on:click="add">+</button>
        <button v-on:click="sub">-</button>
    </div>

</body>



<script src="./vue3.js"></script>
<script src="./vueVuex4.js"></script>

<script>
    // 创建一个新的 store 实例
    const store = Vuex.createStore({
        state() {
            return {
                count: 0
            }
        },
        mutations: {
            increment(state) {
                state.count++
            },
            dec(state) {
                state.count--
            }
        }
    })

    const app = Vue.createApp({
        computed: {
            count() {
                return store.state.count
            }
        },
        methods: {
            add() {
                console.log("add");
                this.$store.commit('increment')
            },
            sub() {
                console.log("sub");
                this.$store.commit('dec')
            }
        }
    })

    // 将 store 实例作为插件安装
    app.use(store)
    app.mount('#app')
</script>

</html>